<!--

  v-on:click.stop

  语法糖 @:xxx.xx.xx.xx ...

  -----------------
  stop 修饰符   https://cn.vuejs.org/v2/api/#v-on
  修饰符：

  .stop - 调用 event.stopPropagation()。  【阻止事件冒泡】
  .prevent - 调用 event.preventDefault()。【阻止自动跳转】 href='url' action('url')
  .capture - 添加事件侦听器时使用 capture 模式。
  .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
  .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。 【按键事件】
  .native - 监听组件根元素的原生事件。
  .once - 只触发一次回调。 【不需要任何表达式】
  .left - (2.2.0) 只当点击鼠标左键时触发。
  .right - (2.2.0) 只当点击鼠标右键时触发。
  .middle - (2.2.0) 只当点击鼠标中键时触发。
  .passive - (2.3.0) 以 { passive: true } 模式添加侦听器

  ----------------


  可以组合使用
  @click.stop.prevent='方法名'

  ---------------

  按键事件：(keydown->keypress->keyup.)
  keydown keyup keypress
  例如：
      1、按下、弹起  keydown keypress keyup
      2、长按 keydown + keypress... keydown + keypress

  ----------------

  鼠标事件：
  1. hover = mouseenter + mouseleave        hover！= mouseover + mouseout。
  2. mouseenter

  3. mousedown
  4. mouseup

  5. mouseover
  6. mouseleave

  7.mouseout

  ----------------


 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    input {
      border-radius: 1;
      border-width: 2;
      border-color: blue;
    }
  </style>
</head>
<body>
  <div id="app">

    <!-- 1. stop 阻止事件冒泡 : 阻止其他监听本标签的事件 -->
    <div @click="divClick">
      aaaa
      <button @click.stop="btnClick">按钮</button>
    </div>

    <br />
    <!-- 2. prevent 阻止自动跳转 href='url' action('url') -->
    <form action="baidu">
      <input type="submit" value='提交' @click.prevent='submitClick'>
    </form>

    <br />
    <!-- 3. keyup监听某个键盘的键帽，键盘按下松开是的 事件监听，不监听按，监听松 -->
    <div>不监听按，监听松</div>
    <input type="text" @keyup='keyUp'>
    <br /><br />
    <div>监听 按下 回车(enter)</div>
    <input type="text" @keyup.enter='keyUp'>
    <br /><br />
    <!-- .{keyCode | keyAlias} 【.enter == .13】 -->
    <div>监听 按下 13 (回车enter)</div>
    <input type="text" @keyup.13='keyUp'>
    <br /><br />
    <div>监听 keydown keyup keypress</div>
    <input type="text" v-on='{keydown: keyDown, keyup: keyUp, keypress: keyPress}'>

    <br /><br />
    <!-- 对象语法 (2.4.0+) -->
    <input type="text" v-on="{
      hover: hover,
      mouseenter: mouseEnter,
      mousedown: mouseDown,
      mouseup: mouseUp,
      mouseover: mouseOver,
      mouseleave: mouseleave,
      mouseout: mouseOut
    }">

    <button type="text" v-on="{
      hover: hover,
      mouseenter: mouseEnter,
      mousedown: mouseDown,
      mouseup: mouseUp,
      mouseover: mouseOver,
      mouseleave: mouseleave,
      mouseout: mouseOut
    }">按钮</button>
  </div>

  <script src="../../js/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      methods: {
        btnClick() {
          console.log('btnClick');
        },
        divClick() {
          console.log('divClick');
        },
        submitClick() {
          console.log('submitClick');
        },

        keyDown() {
          console.log('keyDown');
        },
        keyUp() {
          console.log('keyUp');
        },
        keyPress() {
          console.log('keyPress');
        },

        doThis() {
          console.log('对象语法 (2.4.0+) doThis');
        },
        doThat() {
          console.log('对象语法 (2.4.0+) doThat');
        },

        hover() {
          console.log('对象语法 (2.4.0+) mouse -> hover');
        },
        mouseEnter() {
          console.log('对象语法 (2.4.0+) mouse -> mouseEnter');
        },
        mouseDown() {
          console.log('对象语法 (2.4.0+) mouse -> mouseDown');
        },
        mouseUp() {
          console.log('对象语法 (2.4.0+) mouse -> mouseUp');
        },
        mouseOver() {
          console.log('对象语法 (2.4.0+) mouse -> mouseOver');
        },
        mouseLeave() {
          console.log('对象语法 (2.4.0+) mouse -> mouseLeave');
        },
        mouseOut() {
          console.log('对象语法 (2.4.0+) mouse -> mouseOut');
        },
      }
    })
  </script>
</body>
</html>